<template>
  <div class="mid-block2" style="width: 1000px">
    <el-carousel
      ref="carousel"
      indicator-position="none"
      arrow="never"
      height="330px"
      :initial-index="active"
      :autoplay="false"
    >
      <div v-if="deviceList.length > 0">
        <template v-for="(obj, index) in deviceList">
          <el-carousel-item :key="index">
            <div class="mid-title">
              <div class="display-flex">
                <div class="box1">
                  <span
                    v-if="
                      obj.gatewayEquipmentList &&
                      obj.gatewayEquipmentList.length > 0
                    "
                    class="txt"
                    >{{
                      obj.gatewayEquipmentList[0].hjEquipmentInfo.name
                    }}</span
                  >
                  <span v-if="obj.data && obj.data.hj_stats === '1'">
                    <span class="state state-sucess" />
                    <i>正常 </i>
                  </span>
                  <span v-else>
                    <span class="state state-offline" />
                    <i>离线 </i>
                  </span>
                </div>
                <div class="box3" style="padding-top: 10px">
                  <span v-if="obj.data" style="margin-right: 10px"
                    >焊口编号： {{ obj.data.weldSerialNum }}</span
                  >
                  <span v-if="obj.data" style="margin-right: 10px"
                    > 焊层： {{ obj.data.position }}</span
                  >
                  <span v-if="obj.data && obj.baseInfo"
                    >人员名称： {{ obj.data.username }}</span
                  >
                  <span v-else-if="obj.data" style="margin-right: 10px"
                    >人员编号： {{ obj.data.personCode }}</span
                  >
                  <span
                    v-if="obj.data && obj.data.baseInfo"
                    style="margin-right: 10px"
                    >设备名称： {{ obj.data.baseInfo.name }}</span
                  >
                </div>
                <div class="box1 text-right">
                  <span class="color-green2 view" @click="viewDetails(obj)"
                    ><i class="el-icon-document" />&nbsp;焊机详情</span
                  >
                </div>
              </div>
            </div>
            <div
              class="echart-body"
              style="width: 1000px; height: 320px; margin-top: 40px"
            >
              <hj-line-big :gete-way-code="obj.gatewayCode" :obj="obj.data" />
            </div>
          </el-carousel-item>
        </template>
      </div>
    </el-carousel>
    <div class="thumb-example" style="position: relative; margin-top: 10px">
      <div class="swiper-button-prev">
        <i class="el-icon-caret-left" style="font-size: 40px" />
      </div>
      <div v-if="deviceList.length > 0">
        <swiper
          ref="swiperThumbs"
          class="swiper"
          :options="swiperOptionThumbs"
          style="width: 1000px"
          @click-slide="handleClickSlide"
        >
          <template v-for="(item, index) in deviceList">
            <swiper-slide
              :key="index"
              style="width: 170px; height: 98px; margin-right: 0"
            >
              <div
                class="card-info"
                :class="{ active: active === index }"
                @click="chooseHandle(index)"
              >
                <div class="title text-ellipsis">
                  <span
                    v-if="item.data && item.data.hj_stats === '1'"
                    class="state state-sucess"
                  />
                  <span v-else class="state state-offline" />
                  <span
                    v-if="
                      item.gatewayEquipmentList &&
                      item.gatewayEquipmentList.length > 0
                    "
                    class="tit text-ellipsis"
                    style="
                      width: 120px;
                      display: inline-block;
                      vertical-align: middle;
                    "
                    >{{
                      item.gatewayEquipmentList[0].hjEquipmentInfo.name
                    }}</span
                  >
                  <div style="height: 50px; width: 165px; margin-left: 5px">
                    <hj-line
                      :gete-way-code="item.gatewayCode"
                      :obj="item.data"
                    />
                  </div>
                </div>
              </div>
            </swiper-slide>
          </template>
        </swiper>
      </div>
      <div class="swiper-button-next">
        <i class="el-icon-caret-right" style="font-size: 40px" />
      </div>
    </div>
    <el-dialog
      title="详情"
      :visible.sync="dialogVisible"
      width="530px"
      class="wise-modal"
    >
      <div v-if="dialogVisible" class="wise-wrap">
        <div class="modal-wpline">
          <div class="modal-body">
            <div class="scroplist wise-detail">
              <div class="modal-header">
                <span class="txt text-ellipsis">{{ obj.name }}</span>
              </div>
              <div class="detail-info">
                <el-form
                  label-width="100px"
                  class="wise-form"
                  label-suffix=":"
                  style="padding-top: 60px"
                >
                  <el-form-item v-if="obj.data.hj_stats === '1'" label="状态">
                    <span class="state state-sucess" />正常
                  </el-form-item>
                  <el-form-item v-if="obj.data.hj_stats === '0'" label="状态">
                    <span class="state state-offline" />离线
                  </el-form-item>
                
                  <el-form-item label="焊机编号">
                    {{ hanjiInfo.hanjiCode }}
                  </el-form-item>
                  <el-form-item label="焊机品牌">
                    {{ hanjiInfo.hamjiPinpai }}
                  </el-form-item>
                  <el-form-item label="通信模式">
                    {{ hanjiInfo.tongxunMoshi }}
                  </el-form-item>
                  <el-form-item label="4G卡时间">
                    {{ g4gqTime }}
                  </el-form-item>
                  <el-form-item label="数据地址">
                    {{ hanjiInfo.dataUrl }}
                  </el-form-item>
                  <el-form-item label="工艺编号">
                    {{ hanjiInfo.gongyiCode }}
                  </el-form-item>
                  <el-form-item label="焊口编号">
                    {{ hanjiInfo.hanKouCode }}
                  </el-form-item>
                  <el-form-item label="机组编号">
                    {{ hanjiInfo.jizuCode }}
                  </el-form-item>
                  <el-form-item label="管材信息">
                    {{ hanjiInfo.guanCaiInfo }}
                  </el-form-item>
                  <el-form-item label="焊材信息">
                    {{ hanjiInfo.hanCaiInfo }}
                  </el-form-item>
                 
                  <div class="text-center btn-show">
                    <el-button
                      type="primary"
                      style="display: block; margin: 0 auto"
                      @click="dialogVisible = false"
                      >关闭
                    </el-button>
                  </div>
                </el-form>
                <div class="line3" />
                <div class="line4" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
import { postHandle } from "@/api";
import HjLine from "./hjLine";
import HjLineBig from "./hjLineBig";
import AutoRefreshMixin from "../mixin/AutoRefreshMixin";
import dayjs from "dayjs";
export default {
  name: "MidBlock2",
  components: {
    HjLineBig,
    HjLine,
    Swiper,
    SwiperSlide,
  },
  mixins: [AutoRefreshMixin],

  props: {
    newSpaceId: {
      type: String,
    },
  },
  data() {
    return {
      n: 0,
      isShow: false,
      active: 0,
      g4gqTime:"",
      hanjiInfo: {},
      deviceList: [],
      dialogVisible: false,
      checkList: [
        "current",
        "voltage",
        "ss_speed",
        "haz_temp",
        "air_flux",
        "ar_purity",
        "currentsx",
        "currentxx",
      ],
      swiperOptionThumbs: {
        spaceBetween: 21,
        slidesPerView: "auto",
        touchRatio: 0.2,
        slideToClickedSlide: true,
        width: 840,
        height: 98,
        //  watchOverflow: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
      dataList: [],
      obj: {
        equip_code: "01",
        hj_stats: "0",
      },
    };
  },
  computed: {
    spaceId() {
      return this.$store.state.project.spaceId;
    },
  },
  watch: {
    newSpaceId(v) {
      if (v) this.getDevice();
    },
  },
  created() {
    this.getDevice();
  },
  methods: {
    chooseHandle(index) {
      this.active = index;
      this.$emit("on-change", this.deviceList[index]);
    },
    refreshHandle() {
      if (this.deviceList && this.deviceList.length > 0) {
        this.getData();
      }
    },
    getDevice() {
      postHandle("/api/v1/welder-sbtx-second/gateway-comb/list", {
        d: {
          filters: [
            {
              field: "spaceId",
              operator: "EQUALS",
              value: this.newSpaceId || this.spaceId,
            },
            {
              field: "type",
              operator: "EQUALS",
              value: "WELDER",
            },
            {
              field: "showStates",
              operator: "EQUALS",
              value: 1,
            },
          ],
        },
        obj: {
          flag: true,
        },
      })
        .then((res) => {
          this.deviceList = res.result;
          if (this.deviceList[0]) {
            this.$emit("on-change", this.deviceList[0]);
          }
        })
        .catch((error) => {
          reject(error);
        });
    },
    async getData() {
      for (let i = 0; i < this.deviceList.length; i++) {
     
        let deviceItem = this.deviceList[i];
       
        let data = await this.getGatewayData(deviceItem.gatewayCode);
       
        deviceItem["data"] = {
          cjTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
          hj_stats: "0",
          current: 0,
          voltage: 0,
          ssSpeed: 0,
          hazTemp: 0,
          airFlux: 0,
          arPurity: 0,
          currentsx: 140,
          currentxx: 60,
        };
        if (data && data.length > 0) {
          let item = data[0];
          if (deviceItem.gatewayCode === item.geteWayCode) {
            deviceItem["personCode"] = item.personCode;
            if (!(deviceItem.baseInfo && deviceItem.baseInfo.personCode)) {
              let equipInfo = await this.getEquipInfo(
                item.personCode,
                item.equip_code,
                item.weldcode
              );
              deviceItem["baseInfo"] = equipInfo;
            }
            item["hj_stats"] = "1";
            deviceItem["data"] = item;
          }else{
           
          }
        }
        
        // console.log(this.deviceList);
        // console.log(i);
        // console.log( deviceItem);
    
        this.$set(this.deviceList, i, deviceItem);
      }
      // let codes = this.deviceList.map((item) => item.gatewayCode)
      // if (codes && codes.length > 0) {
      //   postHandle('/ekjdTest/api/HJDatas', {
      //     geteWay_code: this.deviceList.map((item) => item.gatewayCode)
      //   }).then((res) => {
      //     if (res) {
      //       let data = res.result
      //       if (data && data.length > 0) {
      //         this.dataList = data
      //         this.dataList.forEach((item) => {
      //           // if (item.personCode && item.personCode != 'NULL') {
      //           //   let userInfo = this.getUserInfo(item.personCode)
      //           //   userInfo.then((res) => {
      //           //     item['userInfo'] = res
      //           //   })
      //           // }
      //           let equipInfo = this.getEquipInfo(item.personCode, item.equip_code, item.weld_code)
      //           equipInfo.then((res) => {
      //             item['baseInfo'] = res
      //           })
      //           // if (item.equip_code && item.equip_code != 'NULL') {
      //           //
      //           // }
      //           let index = this.deviceList.findIndex(
      //             (d) => d.gatewayCode === item.geteWay_code
      //           )
      //           if (index !== -1) {
      //             this.$set(this.deviceList[index], 'data', item)
      //           }
      //         })
      //       } else {
      //         this.dataList = []
      //       }
      //     }
      //   })
      // }
    },
    viewDetails(obj) {
      
      postHandle("/api/v1/welder-sbtx-second/hj-equipment-info-comb/getHjInfo", {
          d: {
            filters: [
              {
                field: "geteWayCode",
                operator: "EQUALS",
                value: obj.gatewayCode,
              },
           
              // {
              //   field: "kgl2",
              //   operator: "EQUALS",
              //   value: "1",
              // },
            ],
            page: {
              ps: 1,
            },
          },
        }).then((res) => {
           this.hanjiInfo=res.result
           this.g4gqTime=this.hanjiInfo.g4gqTime 
        });
     
      this.obj = obj;
       
      this.dialogVisible = true;
      // if (obj.data) {
      //   this.dialogVisible = true
      // } else {
      //   this.$message.error('设备信息存在')
      // }
    },
    getGatewayData(geteWayCode) {
      return new Promise((resolve, reject) => {
        postHandle("/api/v1/welder-sbtx-second/hj-datas-comb-log/getList", {
          d: {
            filters: [
              {
                field: "geteWayCode",
                operator: "EQUALS",
                value: geteWayCode,
              },
              {
                field: "ct",
                operator: "GT",
                value: dayjs().subtract(3, "minute").valueOf(),
              },
              // {
              //   field: "kgl2",
              //   operator: "EQUALS",
              //   value: "1",
              // },
            ],
            page: {
              ps: 1,
            },
          },
        }).then((res) => {
          resolve(res.result);
        });
      });
    },
    async getUserInfo(serialNum) {
      let result = await postHandle(
        ` /api/v1/welder-uac-second/user-information-comb/show-by-username`,
        {
          obj: {
            serialNum: serialNum,
          },
        }
      );
      return result.result;
    },
    getEquipInfo(personCode, equipCode, weldCode) {
      return new Promise((resolve, reject) => {
        postHandle(
          `/api/v1/welder-sbtx-second/hj-datas-comb/get-big-screen-data`,
          {
            d: {},
            obj: {
              personCode: personCode,
              equipCode: equipCode,
              weldCode: weldCode,
            },
          }
        ).then((res) => {
          resolve(res.result);
        });
      });
    },
    handleClickSlide(index) {
      this.active = index;
      let data = this.dataList[index];
      this.obj = data;
      this.$nextTick(() => {
        let carousel = this.$refs.carousel;
        carousel.setActiveItem(index);
      });
    },
  },
};
</script>
